<template>
    <el-dialog v-model="props.dialogFormVisible" width="500" @close="() => {
        $emit('update_dialogFormVisable', false);
    }" :title="props.title" top="10vh">
        <el-form :model="props.Goods" :rules="rules" ref="GoodsFormRef">
            <el-form-item label="商品编号" :label-width="formLabelWidth" prop="goods_id">
                <el-input v-model="props.Goods.goods_id" />
            </el-form-item>
            <el-form-item label="商品名" :label-width="formLabelWidth" prop="goods_name">
                <el-input v-model="props.Goods.goods_name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="品牌" :label-width="formLabelWidth" prop="brand">
                <el-input v-model="props.Goods.brand" autocomplete="off" />
            </el-form-item>
            <el-form-item label="类别" :label-width="formLabelWidth" prop="category">
                <el-select v-model="props.Goods.category" placeholder="请选择类别">
                    <el-option label="食品类" value='1' />
                    <el-option label="服装类" value='2' />
                    <el-option label="日用品类" value='3' />
                    <el-option label="家具类" value='4' />
                    <el-option label="家用电器类" value='5' />
                    <el-option label="纺织品类" value='6' />
                    <el-option label="五金电料类" value='7' />
                    <el-option label="厨具类" value='8' />
                </el-select>
            </el-form-item>
            <el-form-item label="销售商" :label-width="formLabelWidth" prop="seller">
                <el-input v-model="props.Goods.seller" autocomplete="off" />
            </el-form-item>
            <el-form-item label="生产商" :label-width="formLabelWidth" prop="manufacturer">
                <el-input v-model="props.Goods.manufacturer" autocomplete="off" />
            </el-form-item>
            <el-form-item label="发售日期" :label-width="formLabelWidth" prop="release_date">
                <el-input v-model="props.Goods.release_date" autocomplete="off" />
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
                <el-input v-model="props.Goods.price" autocomplete="off" />
            </el-form-item>
            <el-form-item label="库存量" :label-width="formLabelWidth" prop="num">
                <el-input v-model="props.Goods.num" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleError(GoodsFormRef)">取消</el-button>
                <el-button type="primary" @click="handlePrimary(props.title, GoodsFormRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { addGoodsApi, updateGoodsApi } from '@/api/common';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref, } from 'vue'
const props = defineProps({
    dialogFormVisible: {
        required: true
    },
    Goods: {
        required: true,
        type: Object
    },
    title: {
        required: true,
        type: String
    }
})
const emit = defineEmits(['update_dialogFormVisable'])
const formLabelWidth = ref("120px");
const GoodsFormRef = ref<FormInstance>();
const handleError = (formEl: FormInstance | undefined) => {
    emit('update_dialogFormVisable', false)
}
const rules: FormRules = {
    goods_id: [
        { required: true, message: '请输入商品编号', trigger: 'blur' },
    ],
    goods_name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
    ],
    brand: [
        { required: true, message: '请输入品牌', trigger: 'blur' },
    ],
    category: [
        { required: true, message: '请选择商品类别', trigger: 'blur' },
    ],
    seller: [
        { required: true, message: '请输入销售商', trigger: 'blur' },
    ],
    manufacturer: [
        { required: true, message: '请输入生产商', trigger: 'blur' },
    ],
    release_date: [
        { required: true, message: '请输入发售日期', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '请输入价格', trigger: 'blur' },
    ],
    num: [
        { required: true, message: '请输入库存量', trigger: 'blur' },
    ]

}
const handlePrimary = async (title: string, formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (title == '修改商品信息') {
                updateGoodsApi({
                    index: props.Goods.index,
                    goods_id: props.Goods.book_id,
                    goods_name: props.Goods.goods_name,
                    brand: props.Goods.brand,
                    category: props.Goods.category,
                    seller: props.Goods.seller,
                    manufacturer: props.Goods.manufacturer,
                    release_date: props.Goods.release_date,
                    price: props.Goods.price,
                    num: props.Goods.num,
                    imgurl: props.Goods.imageurl
                }).then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success('修改成功！')
                    } else {
                        ElMessage.error('修改失败！')
                    }
                }).catch(err => {
                    ElMessage.error('服务器错误！')
                })
            }
            if (title == '新增商品信息') {
                addGoodsApi({
                    index: props.Goods.index,
                    goods_id: props.Goods.book_id,
                    goods_name: props.Goods.goods_name,
                    brand: props.Goods.brand,
                    category: props.Goods.category,
                    seller: props.Goods.seller,
                    manufacturer: props.Goods.manufacturer,
                    release_date: props.Goods.release_date,
                    price: props.Goods.price,
                    num: props.Goods.num,
                    imgurl: props.Goods.imageurl
                }).then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success('添加成功！')
                    } else {
                        ElMessage.error('添加失败！')
                    }
                }).catch(err => {
                    console.log(err)
                    ElMessage.error('服务器错误！')
                })
            }
            emit('update_dialogFormVisable', false)
        }
    })
}
</script>

<style></style>